<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{$title}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__ADMIN_PUBLIC__/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__ADMIN_PUBLIC__/style/admin.css" media="all">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <!--<div class="layui-card-header">{$title}</div>-->
                <div class="layui-card-body">
                    <div class="layui-btn-group test-table-operate-btn" style="margin-bottom: 10px;">
                        <!--<button class="layui-btn" data-type="addTel" id="add-tel"><i class="layui-icon"></i> 新增用户</button>-->
                    </div>
                    <table class="layui-hide" id="test-table-manager" lay-filter="test-table-manager"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="editUser">
    <form class="layui-form" action="" style="padding-top: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;">姓名：</label>
            <div class="layui-input-inline" style="width: 350px;">
                <input type="text" name="name" class="layui-input" placeholder="姓名" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;">手机号：</label>
            <div class="layui-form-mid layui-word-aux" id="mobile-val"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;">状态：</label>
            <div class="layui-input-inline">
                <input type="checkbox" name="status" lay-skin="switch" lay-text="启用|禁用">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;">所属组：</label>
            <div class="layui-input-inline" style="width: 400px;" id="auth-group-list">
                <!--<input type="checkbox" name="1" lay-skin="primary" title="写作写作">-->
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="hidden" name="userId" value="">
                <button class="layui-btn" lay-submit lay-filter="butClick">确认编辑</button>
                <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
            </div>
        </div>
    </form>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="__ADMIN_PUBLIC__/layui/layui.js"></script>
<script>
    layui.config({
        base: '__ADMIN_PUBLIC__/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table','form'], function(){
        var table = layui.table,
            $ = layui.jquery,
            form = layui.form;

        var managerTable = function(){
            layer.load(2);
            table.render({
                elem: '#test-table-manager'
                ,url: 'getUserList'
                ,cellMinWidth: 150
                ,page: true
                ,cols: [[
                    {field:'u_id', title:'用户ID',align:'center'}
                    ,{field:'name', title:'姓名',align:'center'}
                    ,{field:'mobile', title:'手机号',align:'center'}
                    ,{field:'user_group', title:'用户组',align:'center'}
                    ,{field:'status', title:'状态',align:'center',templet:function (d) {
                        if (d.status == "0") {
                            return '<span class="layui-btn layui-btn-xs layui-btn-disabled">禁用</span>';
                        }else if (d.status == "1") {
                            return '<span class="layui-btn layui-btn-xs  layui-btn-normal">启用</span>';
                        }
                    }}
                    ,{field:'create_time', title:'创建时间',width:200,align:'center'}
                    ,{field:'right', title:'操作', toolbar: '#barDemo',align:'center'}
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        };
        managerTable();

        var openHtml;
        table.on('tool(test-table-manager)',function (obj) {
            var data = obj.data;
            var checkBoxHtml = '';
            console.log(data);
            if(obj.event == 'edit'){
                $.ajax({
                    url:"/admin/authGroup?page=1&limit=100",
                    dataType:'json',
                    success:function (response) {
                       $.each(response.data,function (i,v) {
                           if(v.status == 1){
                               checkBoxHtml += '<input type="checkbox" name="'+v.id+'" lay-skin="primary" title="'+v.title+'">';
                           }
                       });
                        openHtml =  layer.open({
                            type: 1,
                            title:'编辑用户',
                            skin: 'layui-layer-rim', //加上边框
                            area: ['700px', '400px'], //宽高
                            content:$('#editUser').html(),
                            success:function (layero,index) {
                                $('#auth-group-list').html(checkBoxHtml);
                                // console.log(layero);
                                layero.find("input[name='name']").val(data.name);
                                layero.find("#mobile-val").html(data.mobile);
                                if(data.status == 1){
                                    layero.find("input[name='status']").prop('checked','true');
                                }else{
                                    layero.find("input[name='status']").prop('checked');
                                }
                                $.each(data.groups,function (i,v) {
                                    layero.find("input[name='"+v.id+"']").prop('checked','true')
                                });
                                layero.find("input[name='userId']").val(data.u_id);
                                form.render();
                            }
                        });
                    }
                });

            }
            if(obj.event == 'del'){
                layer.confirm('是否删除？',{icon:3,title:'提示'},function (index) {
                    
                });
            }
        });


        // 编辑提交
        form.on('submit(butClick)',function (obj) {
            var data = obj.field;
            var flag = false;
            $('#auth-group-list input').each(function (i,x) {
                if($(x).prop('checked')){
                    flag = true;
                    return false;
                }
            });
            if(flag){
                $.post("edituser",{data},function (response) {
                    if (response.code == 0) {
                        layer.msg(response.msg, {icon: 6, time: 1000}, function () {
                            layer.close(openHtml);
                            managerTable();
                        });
                    } else {
                        layer.msg(response.msg, {icon: 5, anim: 6});
                    }
                });
            }else{
                layer.msg('必须选择一个用户组', {icon: 5, anim: 6});
            }
            return false;
        });

    });
</script>
</body>
</html>